<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

{% if mobile %}
<meta name="viewport" content="width=device-width, initial-scale=1">
{% else %}
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
{% endif %}

<title>{% block title %}{% endblock %}</title>

{% block stylesheet %}
{% if mobile %} <!---------- mobile web ---------->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
{% else %} <!---------- web ---------->
<link rel="stylesheet" type="text/css" href="{% url base_static "css/bootstrap.css" %}" />
<style type="text/css">
body {
    padding-top: 60px;
}
</style>
{% endif %}
{% endblock %}

{% block javascript %}
{% if mobile %} <!---------- mobile web ---------->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
{% else %} <!---------- web ---------->
<script type="text/javascript" src="{% url base_static "js/jquery-1.6.4.min.js" %}"></script>
<script type="text/javascript" src="{% url base_static "js/bootstrap-dropdown.js" %}"></script>
<script type="text/javascript">
$(function() {
    $("#topbar").dropdown();
});
</script>
{% endif %}
{% endblock %}
</head>
<body>
  {% if mobile %} <!---------- mobile web ---------->
  <div data-role="page">
    <div data-role="header" data-theme="f">
      <h1>Brispon Mobile</h1>
      {% if user.is_authenticated %}
      <a href="" data-direction="reverse" class="ui-btn-right jqm-home">{{ user.username }}</a>
      {% else %}
      <a href="{% url auth_login %}" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
      {% endif %}
    </div><!-- /header -->
    <div data-role="footer">        
        <div data-role="navbar" data-iconpos="bottom">
          <ul>
            <li><a href="{% url mcoupons %}" {% ifequal m_current_page "coupon" %} class="ui-btn-active" {% endifequal %} data-icon="star">Coupon</a></li>
            <li><a href="{% url mstores %}" {% ifequal m_current_page "store" %} class="ui-btn-active" {% endifequal %} data-icon="star">Store</a></li>
            <li><a href="{% url mevents %}" {% ifequal m_current_page "event" %} class="ui-btn-active" {% endifequal %} data-icon="star">Event</a></li>
          </ul>
        </div><!-- /navbar -->
      </div><!-- /footer -->
    <div data-role="content"> 
  {% else %} <!---------- web ---------->
  <div class="topbar">
	<div class="fill">
	  <div class="container">
    	<a class="brand" href="{% url index %}">Brisbane + coupon</a>
      	  <ul class="nav">
	        <li{% ifequal current_page "coupon" %} class="active" {% endifequal %}><a href="{% url coupons %}">Coupon</a></li>
            <li{% ifequal current_page "store" %} class="active" {% endifequal %}><a href="{% url stores %}">Store</a></li>
	        <li{% ifequal current_page "event" %} class="active" {% endifequal %}><a href="{% url events %}">Event</a></li>
	        <li{% ifequal current_page "contract" %} class="active" {% endifequal %}><a href="{% url contract %}">Contact</a></li>
	      </ul>
	      <ul class="nav secondary-nav">
	      {% if user.is_authenticated %}
	        <li><a href="">{{ user.username }}</a></li>
	        <li class="dropdown" data-dropdown="dropdown" >
              <a href="#" class="dropdown-toggle">My Pages</a>
              <ul class="dropdown-menu">
                <li><a href="#">My Coupon</a></li>
                <li class="divider"></li>
                <li><a href="{% url auth_logout %}">Log out</a></li>
              </ul>
            </li>
	      {% else %}
	        <li><a href="{% url auth_login %}">Log In</a></li>
	        <li><a href="{% url registration_register %}">Sign Up</a></li>
	      {% endif %}
        </ul>  
      </div>
	</div>
  </div>
  <div class="container">
  {% endif %}
  {% block content %}
  {% endblock %}
  
  {% if mobile %}  <!---------- mobile web ---------->
      </div>
  </div>
  {% else %} <!---------- web ---------->
    <footer>
      <p>&copy; Gluee 2011</p>
    </footer>
    </div> <!-- /container -->
  {% endif %}
  </body>
</html>
